<!DOCTYPE html>
<html>
<head>
  <title>mixins option</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。 -->
  <div id="app">
   {{num}}
   <p><button @click = add>add</button></p>
  </div>
  <script type="text/javascript">
    var addConsole={
      // vue的生命周期函数
      updated: function(){
        console.log("数据发生变化，变成了"+this.num);
      }
    };


    Vue.mixin({
      updated: function(){
        console.log("我是全局的混入");
      }
    });


    var app = new Vue({
      el:"#app",
      data:{
        num : 1,
      },
      methods: {
        add: function(){
          this.num ++
        }
      },
      // vue都是混入的先执行，原生的后执行
      updated: function(){
        console.log("我是原生的update");
      },
      mixins: [addConsole]
    })
  </script>
</body>
</html>